<template>
  <view class="container">
    <a-uni-form
      :form.async="form"
      :option="option"
      :detail="detail"
      @auniFormMethods="auniFormMethods"
    ></a-uni-form>
  </view>
</template>

<script>
export default {
  name: "auniFormTemplate",
  components: {},
  data() {
    return {
      // option: {column:[{params:{key:'',type:'uid'},custom:'customInfo',type:'customInfo',component:'customInfo',eformModel:'id',modelType:'string',label:'产品编号',span:24,display:false,prop:'id',eventList:[]},{type:'input',eformModel:'name',modelType:'string',label:'产品名称',span:24,display:true,prop:'name',eventList:[]},{type:'input',eformModel:'description',modelType:'string',label:'产品描述',span:24,display:true,prop:'description'},{type:'input',eformModel:'code_name',modelType:'string',label:'产品代号',span:24,display:true,prop:'code_name'},{label:'产品负责人',params:{key:'nickName',type:'userInfo'},custom:'customInfo',type:'customInfo',component:'customInfo',span:24,prop:'owner',eventList:[],eformModel:'owner',modelType:'string'},{type:'dynamic',children:{align:'center',headerAlign:'center',index:true,addBtn:true,delBtn:true,column:[{type:'input',eformModel:'name',modelType:'string',label:'模块名',span:24,display:true,prop:'name'},{type:'input',eformModel:'desc',modelType:'string',label:'模块描述',span:24,display:true,prop:'desc'}]},eformModel:'p2_modules',modelType:'array',label:'产品模块',span:24,display:true,prop:'p2_modules',eventList:[]},{type:'dynamic',children:{align:'center',headerAlign:'center',index:true,addBtn:true,delBtn:true,column:[{type:'input',eformModel:'version',modelType:'string',label:'版本号',span:24,display:true,prop:'version'},{type:'input',eformModel:'changelog',modelType:'string',label:'更新日志',span:24,display:true,prop:'changelog'}]},eformModel:'p_versions',modelType:'array',label:'版本历史',span:24,display:true,prop:'p_versions'}],labelPosition:'left',labelSuffix:'：',labelWidth:120,gutter:0,menuBtn:true,submitBtn:false,submitText:'提交',emptyBtn:false,emptyText:'清空',menuPosition:'center',crud:{column:[{formColumn:'name',type:'input',label:'产品名称',prop:'name'},{formColumn:'code_name',type:'input',label:'产品代号',prop:'code_name'},{formColumn:'description',type:'input',label:'产品描述',prop:'description'},{formColumn:'owner',type:'input',label:'产品负责人',prop:'owner'}]}},
      option: {
        column: [
          {
            label: "上传",
            custom: "customUpload",
            type: "customUpload",
            // required: true,
            display: true,
            params: {
              type: "image",
              fileType: "image/jpeg",
              fileSize: 2,
            },
            component: "customUpload",
            span: 24,
            prop: "a166126914632983936",
          },
          {
            label: "姓名",
            type: "customInfo",
            display: true,
            // required: true,
            params: {
              type: "userInfo",
              key: 'nickName',
            },
            custom: "customInfo",
            component: "customInfo",
            span: 24,
            prop: "a166126914632983937",
            eformModel: ["xm"],
            modelType: "string",
          },
          {
            type: "input",
            label: "单行文本",
            span: 24,
            // 是否显示
            display: true,
            // 单组件可用detail来处理不可编辑的展示状态
            // detail: true,
            prop: "a166126914632983938",
            required: true,
          },
          {
            type: "password",
            label: "密码",
            span: 24,
            display: true,
            prop: "a166126914632983939",
            // required: true,
          },
          {
            type: "textarea",
            label: "多行文本",
            span: 24,
            display: true,
            prop: "a166126914632983940",
            // required: true,
            maxlength: 100,
            minRows: 2,
            maxRows: 4,
            showWordLimit: true,
          },
          {
            type: "number",
            label: "计数器",
            controls: true,
            span: 24,
            display: true,
            prop: "a166126914632983941",
            // required: true,
          },
          {
            type: "map",
            label: "地图选择器",
            span: 24,
            display: true,
            prop: "a166126914632983942",
            // required: true,
          },
          {
            type: "radio",
            label: "单选框",
            dicData: [
              {
                label: "选项一",
                value: "0",
              },
              {
                label: "选项二",
                value: "1",
              },
            ],
            span: 24,
            display: true,
            props: {
              label: "label",
              value: "value",
              desc: "desc",
            },
            prop: "a166126914632983943",
            // required: true,
          },
          {
            type: "checkbox",
            label: "多选框",
            dicData: [
              {
                label: "选项一",
                value: "0",
              },
              {
                label: "选项二",
                value: "1",
              },
            ],
            span: 24,
            display: true,
            props: {
              label: "label",
              value: "value",
              desc: "desc",
            },
            prop: "a166126914632983944",
            // required: true,
          },
          {
            type: "select",
            label: "下拉选择器",
            dicData: [
              {
                label: "选项一",
                value: "0",
              },
              {
                label: "选项二",
                value: "1",
              },
              {
                label: "选项三",
                value: "2",
              },
            ],
            span: 24,
            display: true,
            props: {
              label: "label",
              value: "value",
              desc: "desc",
            },
            prop: "a166126914632983945",
            cascader: [],
            // required: true,
          },
          {
            type: "cascader",
            label: "级联选择器",
            dicData: [
              {
                label: "选项一",
                value: "0",
                children: [
                  {
                    label: "选项1-1",
                    value: 11,
                  },
                  {
                    label: "选项1-2",
                    value: 12,
                  },
                ],
              },
              {
                label: "选项二",
                value: "1",
              },
              {
                label: "选项三",
                value: "2",
              },
            ],
            span: 24,
            display: true,
            props: {
              label: "label",
              value: "value",
              desc: "desc",
            },
            prop: "a166126914632983946",
            cascader: [],
            // required: true,
          },
          // 日期，日期时间组件,uni-datetime-picker,不再支持单独的时间选择（type=time）
          {
            type: "date",
            label: "日期",
            span: 24,
            display: true,
            prop: "a166126914632983950",
            // required: true,
          },
          {
            type: "datetime",
            label: "日期时间",
            span: 24,
            display: true,
            prop: "a166126914632983952",
            // required: true,
          },
          // 时间,时间选可使用内置组件 picker
          {
            type: "time",
            label: "时间",
            span: 24,
            display: true,
            prop: "a166126914632983951",
            required: true,
          },
          // 使用原生switch组件
          {
            type: "switch",
            label: "开关",
            span: 24,
            display: true,
            prop: "a166126914632983953",
            // required: true,
          },
          {
            type: "rate",
            label: "评价",
            span: 24,
            display: true,
            prop: "a166126914632983954",
            // vant-form的必填校验有bug
            required: true,
          },
          // 使用原生slider
          {
            type: "slider",
            label: "滑块",
            span: 24,
            display: true,
            prop: "a166126914632983955",
            min: 0,
            max: 10,
            step: 1,
            //
            // required: true,
          },
          {
            // 文件上传配置具体情况补充
            type: "upload",
            label: "上传",
            span: 24,
            display: true,
            prop: "a166126914632983947",
            // vant-form的必填校验有bug
            // required: true,
          },
          {
            type: "dynamic",
            label: "子表单",
            span: 24,
            display: true,
            prop: "a166126914632983960",

            // required: true,

            children: {
              align: "center",
              headerAlign: "center",
              index: false,
              addBtn: true,
              delBtn: true,
              column: [
                {
                  type: "datetime",
                  label: "日期时间",
                  span: 24,
                  display: true,
                  prop: "a166126914632983961",
                  required: true,
                },
                {
                  type: "switch",
                  label: "开关",
                  span: 24,
                  display: true,
                  prop: "a166126914632983962",
                  // required: true,
                },
                {
                  type: "rate",
                  label: "评价",
                  span: 24,
                  display: true,
                  prop: "a166126914632983963",
                  // vant-form的必填校验有bug
                  // required: true,
                },
              ],
            },
          },

          {
            type: "ueditor",
            label: "富文本",
            span: 24,
            display: true,
            prop: "a166126914632983956",
            //
            // required: true,
          },
        ],
        labelPosition: "left",
        labelSuffix: "：",
        labelWidth: 120,
        gutter: 0,
        menuBtn: true,
        submitBtn: true,
        submitText: "提交",
        emptyBtn: true,
        emptyText: "清空",
        menuPosition: "center",
        // option里的全局配置
        // 全局详情模式
        // detail: true,
        // // 全局只读
        // readonly: true,
        // // 全局禁用
        // disabled: true,

      },


      

      // option: {
      //   column: [
      //     {
      //       type: "select",
      //       label: "下拉静态数据",
      //       dicData: [
      //         { label: "选项一", value: "0" },
      //         { label: "选项二", value: "1" },
      //         { label: "选项三", value: "2" },
      //       ],
      //       span: 24,
      //       display: true,
      //       props: { label: "label", value: "value", desc: "desc" },
      //       prop: "a166563209943211540",
      //       eventList: [],
      //       cascader: [],
      //     },
      //     {
      //       type: "input",
      //       label: "静态输入框",
      //       span: 24,
      //       display: true,
      //       prop: "a166563221480120943",
      //       eventList: [],
      //       required: true,
      //     },
      //     {
      //       type: "select",
      //       label: "下拉数据模型",
      //       dicData: [{}, {}, {}],
      //       span: 24,
      //       display: true,
      //       props: { label: "name", value: "id", desc: "name" },
      //       prop: "a166563210229332961",
      //       eventList: [
      //         {
      //           receiver: {
      //             prop: "a166563217636914002",
      //             label: "关联输入框",
      //             type: "value",
      //             props: { label: "", value: "", desc: "" },
      //           },
      //           source: {
      //             type: "selfDic",
      //             tableModel: { tableId: "", query: {} },
      //             selfDic: {
      //               field: ["name"],
      //               props: { label: "", value: "", desc: "" },
      //             },
      //           },
      //         },
      //         {
      //           receiver: {
      //             prop: "a166563217160921702",
      //             label: "关联下拉",
      //             type: "dic",
      //             props: { label: "name", value: "name", desc: "name" },
      //           },
      //           source: {
      //             type: "tableModel",
      //             tableModel: {
      //               tableId: "e07a5a4e57db470dab2a00fada99ec3e",
      //               query: { searchKey: "id", op: "eq", searchVal: "${value}" },
      //               formatter: "(res) {\n  return res.data;\n}",
      //             },
      //             selfDic: {
      //               field: ["version"],
      //               props: { label: "", value: "", desc: "" },
      //             },
      //           },
      //         },
      //       ],
      //       cascader: [],
      //       dicTableId: "e07a5a4e57db470dab2a00fada99ec3e",
      //       dicTableQuery: { searchKey: "", op: "", searchVal: "" },
      //     },
      //     {
      //       type: "input",
      //       label: "关联输入框",
      //       span: 24,
      //       display: true,
      //       prop: "a166563217636914002",
      //       eventList: [],
      //     },
      //     {
      //       type: "select",
      //       label: "关联下拉",
      //       dicData: [
      //         { label: "选项一", value: "0" },
      //         { label: "选项二", value: "1" },
      //         { label: "选项三", value: "2" },
      //       ],
      //       span: 24,
      //       display: true,
      //       props: { label: "label", value: "value", desc: "desc" },
      //       prop: "a166563217160921702",
      //       eventList: [],
      //       cascader: [],
      //     },
      //     {
      //       type: "date",
      //       label: "日期",
      //       span: 24,
      //       display: true,
      //       format: "yyyy-MM-dd",
      //       valueFormat: "yyyy-MM-dd",
      //       prop: "a166615098976079905",
      //       eventList: [],
      //     },
      //     {
      //       type: "textarea",
      //       label: "多行文本",
      //       span: 24,
      //       display: true,
      //       prop: "a166615098370146909",
      //       eventList: [],
      //     },
      //     {
      //       type: "dynamic",
      //       label: "子表单",
      //       span: 24,
      //       display: true,
      //       children: {
      //         align: "center",
      //         headerAlign: "center",
      //         index: false,
      //         addBtn: true,
      //         delBtn: true,
      //         column: [
      //           {
      //             type: "input",
      //             label: "单行文本",
      //             span: 24,
      //             display: true,
      //             prop: "a166615919457913387",
      //             eventList: [],
      //           },
      //         ],
      //       },
      //       prop: "a166615919250974927",
      //       eventList: [],
      //     },
      //     {
      //       label: "对象",
      //       display: true,
      //       labelPosition: "left",
      //       params: {
      //         children: {
      //           emptyBtn: false,
      //           submitBtn: false,
      //           column: [
      //             {
      //               type: "input",
      //               label: "单行文本",
      //               span: 24,
      //               display: true,
      //               prop: "a166608556827921736",
      //               labelPosition: "top",
      //               labelslot: true,
      //               eventList: [],
      //             },
      //             {
      //               type: "select",
      //               label: "下拉选择器",
      //               dicData: [
      //                 { label: "选项一", value: "0" },
      //                 { label: "选项二", value: "1" },
      //                 { label: "选项三", value: "2" },
      //               ],
      //               span: 24,
      //               display: true,
      //               dicOption: "static",
      //               props: { label: "label", value: "value", desc: "desc" },
      //               prop: "a166615083954324614",
      //               labelPosition: "top",
      //               labelslot: true,
      //               eventList: [],
      //               cascader: [],
      //             },
      //           ],
      //         },
      //       },
      //       children: {
      //         emptyBtn: false,
      //         submitBtn: false,
      //         column: [
      //           {
      //             type: "input",
      //             label: "单行文本",
      //             span: 24,
      //             display: true,
      //             prop: "a166608556827921736",
      //             labelPosition: "top",
      //             labelslot: true,
      //             eventList: [],
      //           },
      //           {
      //             type: "select",
      //             label: "下拉选择器",
      //             dicData: [
      //               { label: "选项一", value: "0" },
      //               { label: "选项二", value: "1" },
      //               { label: "选项三", value: "2" },
      //             ],
      //             span: 24,
      //             display: true,
      //             dicOption: "static",
      //             props: { label: "label", value: "value", desc: "desc" },
      //             prop: "a166615083954324614",
      //             labelPosition: "top",
      //             labelslot: true,
      //             eventList: [],
      //             cascader: [],
      //           },
      //         ],
      //       },
      //       custom: "customGroup",
      //       type: "customGroup",
      //       component: "customGroup",
      //       span: 24,
      //       prop: "a166608494312878898",
      //       eventList: [],
      //     },
      //     {
      //       label: "version",
      //       display: true,
      //       params: {
      //         tableId: "",
      //         foreignKey: [],
      //         primaryTableId: "",
      //         primaryKey: [],
      //         formOption: {
      //           column: [
      //             {
      //               type: "input",
      //               label: "name",
      //               span: 24,
      //               display: true,
      //               prop: "name",
      //               eventList: [],
      //               eformModel: "name",
      //               modelType: "string",
      //             },
      //           ],
      //           labelPosition: "left",
      //           labelSuffix: "：",
      //           labelWidth: 120,
      //           gutter: 0,
      //           menuBtn: true,
      //           submitBtn: true,
      //           submitText: "提交",
      //           emptyBtn: true,
      //           emptyText: "清空",
      //           menuPosition: "center",
      //           border: true,
      //         },
      //       },
      //       custom: "customCrud",
      //       type: "customCrud",
      //       component: "customCrud",
      //       span: 24,
      //       prop: "version",
      //       eventList: [],
      //       eformModel: "version",
      //       modelType: "array",
      //     },
      //     {
      //       label: "信息填充",
      //       display: true,
      //       params: { key: "", type: "userInfo" },
      //       custom: "customInfo",
      //       type: "customInfo",
      //       component: "customInfo",
      //       span: 24,
      //       prop: "a166625426711521926",
      //       eventList: [],
      //     },
      //     {
      //       type: "map",
      //       component: "avue-input-map",
      //       label: "地图选择器",
      //       span: 24,
      //       display: true,
      //       prop: "a166693804702764575",
      //       eventList: [],
      //     },
      //     {
      //       label: "filebase上传",
      //       params: { type: "image", fileType: "image/jpeg", fileSize: 2 },
      //       custom: "customUpload",
      //       type: "customUpload",
      //       component: "customUpload",
      //       span: 24,
      //       prop: "a166726646293868884",
      //       eventList: [],
      //     },
      //     {
      //       type: "upload",
      //       label: "上传",
      //       span: 24,
      //       display: true,
      //       showFileList: true,
      //       multiple: true,
      //       limit: 10,
      //       prop: "a166726646669836370",
      //       eventList: [],
      //     },
      //   ],
      //   labelPosition: "left",
      //   labelSuffix: "：",
      //   labelWidth: 120,
      //   gutter: 0,
      //   menuBtn: true,
      //   submitBtn: true,
      //   submitText: "提交",
      //   emptyBtn: true,
      //   emptyText: "清空",
      //   menuPosition: "center",
      //   group: [
      //     {
      //       label: "分组",
      //       prop: "a166615852459849001",
      //       arrow: false,
      //       collapse: true,
      //       display: true,
      //       column: [
      //         {
      //           type: "input",
      //           label: "单行文本",
      //           span: 24,
      //           display: true,
      //           prop: "a166615852641460330",
      //           labelPosition: "top",
      //           labelslot: true,
      //           eventList: [],
      //         },
      //       ],
      //     },
      //   ],
      // },
      
      


      form: {
        // a166126914632983938: "",
      },
      // 测试数据回显
      // form: {
      //   a166126914632983938: "1",
      //   a166126914632983939: "2",
      //   a166126914632983940: "3",
      //   a166126914632983941: 4,
      //   a166126914632983942: "北京市/北京市/东城区",
      //   a166126914632983943: "1",
      //   a166126914632983944: ["0", "1"],
      //   a166126914632983945: "2",
      //   a166126914632983946: "选项1-2",
      //   a166126914632983947: [
      //     {
      //       file: {},
      //       status: "",
      //       message: "",
      //       isImage: true,
      //       content:
      //         "",
      //       filebaseId: "616a9143-fd4a-412f-9118-6c56ac459340",
      //       baseUrl: "/filebase/api/v1/app/files/616a9143-fd4a-412f-9118-6c56ac459340?inline=true",
      //       // url: "https://img01.yzcdn.cn/vant/leaf.jpg"
      //     },
      //   ],
      //   a166126914632983950: "2022-09-01",
      //   a166126914632983951: "12:00",
      //   a166126914632983952: "2022-09-01 14:03",
      //   a166126914632983953: true,
      //   a166126914632983954: 4,
      //   a166126914632983955: 6,
      //   a166126914632983960: [
      //     {
      //       a166126914632983961: "",
      //       a166126914632983962: "",
      //       a166126914632983963: "",
      //     },
      //     {
      //       a166126914632983961: "2022-09-01 14:04",
      //       a166126914632983962: true,
      //       a166126914632983963: 4,
      //     },
      //   ],
      //   a166126914632983956: "<p>5555</p>",
      //   a166127125124516760: "",
      //   a166127125342541010: "",
      //   a1661271251245167601: "",
      //   a1661271253425410101: "",
      // },
      // uni-forms上绑定，也可以在每一项上绑定rules
      dynamicRules: {
        a166126914632983938: {
          rules: [
            {
              required: true,
              errorMessage: "域名不能为空",
            },
          ],
        },
      },
      // detail: true,
    };
  },
  computed: {},
  onLoad() {},
  onReady() {},
  methods: {
    /**
     * @description: AForm点击提交触发父组件自定义事件
     * @param {*} data
     * @return {*}
     */
    auniFormMethods(data) {
      // console.log("a-form-data :>> ", data);
      // console.log("a-form-form :>> ", this.form);
    },
  },
};
</script>

<style lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}
</style>
